
let div=document.querySelector('.inner');
let top1='../imgs/top.png';
let show1='../imgs/show.png';



// 页面内容渲染
function render(_list, _page = 1) {
    // console.log('-----------');
    // console.log(dex);

    let end = 10 * _page;
    let start = end - 10;

    // console.log(end, start);

    _list = _list.slice(start, end);
    
     div.innerHTML = _list.reduce((acc, item) => acc.concat(`<div>
   <div class="text-auther">
     <!-- 作者头像 -->
     <a href="#">
         <img src="${item.author.avatar_url}" style="width:30px;height:30px" alt="">
     </a>
     <!-- 回复数和点击数 -->
     <span>
         <span class="count_of_replies" title="回复数">
             ${item.reply_count}
         </span>
         <span class="count_seperator">/</span>
         <span class="count_of_visits" title="点击数">
             ${item.visit_count}
         </span>
     </span>
 </div>
 <!-- 文章标题 -->
 <div class="text-title">
     <span class="put_top">
     <img src="${item.top ? top1 : show1}" style="height:50px"/>
     </span>
     <a class="topic_title" href="content.html?id=${item.id}" title="${item.title}">
         ${item.title}
     </a>
 </div>
 <!-- 最后回复的时间 -->
 <div class="text-message">
 <a class="last_time pull-right" href="">
     <img class="user_small_avatar" src="">
     <span class="last_active_time" id="tm" >${item.last_reply_at}</span>
 </a>
</div>
</div>`
    ), `<div>`).concat(`</div>`);
    
    const tms = document.querySelectorAll('#tm');

     tms.forEach(item =>{item.innerHTML= dateDiff(item.innerHTML)});

}


let tab= document.querySelector('.tab');
tab.addEventListener('click', ClickTab);

// tab主题分类,axios求值
// 通过事件委托，得到点击的值，并传入axios
function ClickTab(e) {
    // console.log(e.target.innerText);
    const inner = document.querySelector('.inner');
    let t = e.target.innerText;
    if (t != "全部") {
        if (t === '精华') t = 'good';
        if (t === '分享') t = 'share';
        if (t === '问答') t = 'ask';
        if (t === '招聘') t = 'job';
        if (t === '客户端') inner.innerHTML = '<div>该功能暂未开启</div>';
        // console.log(t);
        axios.get('https://cnodejs.org/api/v1/topics', {
            params: {
                tab: t
            }
        }).then(res => render(res.data.data)).catch(err => console.log('err=>', err));
    }else {
        // axios 求值
        axios.get('https://cnodejs.org/api/v1/topics').then(res=>render(res.data.data)).catch(err => console.log('err=>', err));
    }
}


let dex = 1;
const forward = document.querySelector('#forward');
const next = document.querySelector('#next');

const lis = document.querySelectorAll('.page-item');
lis.forEach(item => item.addEventListener('click', nextPage));

// 底部翻页按钮
function nextPage(e) {
    if (e.target.innerText == 1 || e.target.innerText == 2 || e.target.innerText == 3) {
        dex = e.target.innerText;
    }
   
    // console.log(e.target.innerText);
    axios.get('https://cnodejs.org/api/v1/topics').then(res => render(res.data.data, dex)).catch(err => console.log('err=>', err));
}

forward.addEventListener('click', goFor);
next.addEventListener('click', goNext);
// 前进按钮
function goFor() {
    console.log(dex);
    if (dex != 1) {
        dex--;
        axios.get('https://cnodejs.org/api/v1/topics').then(res=>render((res.data.data),dex))
    }
}
// 后退按钮
function goNext() {
    if (dex != 3) {
        dex++;
        axios.get('https://cnodejs.org/api/v1/topics').then(res=>render((res.data.data),dex))
    }
}



// 初始化
// axios 求值
axios.get('https://cnodejs.org/api/v1/topics').then(res => render(res.data.data));




// 时间
function dateDiff(_time) {
     // 开始的时间：转成时间戳     现在的时间
     var end = Date.now();// new Date().getTime() //获取当前最新的时间戳

     // 结束时间: 转成时间戳     最后一次回复的时间
     var start = new Date(_time).getTime();
 
     // 获取结束与开始时间之间的时间戳的差值
     var diff = end - start;
 
    //  console.log('diif=>', diff);
 
     // 将时间戳的差值转成 天数 1000*60*60*24(计算1天有多少毫秒)
     var days = Math.floor(diff/(1000*60*60*24)); //向下取整
     // console.log('剩余天数=>', days);
 
     // 不足两位数值补齐一个零
     //  var _days = days < 10 ? days : days;
    
    var _days = Math.round(days / 30);
    
    _days = _days < 1 ? '昨天' : _days+'个月前';
 
     // 将 所有计算的差值(天、小时、分钟、秒)进行字符串拼接
     var _diff = ''.concat(_days);
 
    //  console.log('距离最后一次回复的时间:', _diff);

     return _diff;
 
}




// jquery  进行tab栏切换
$(function () {
    // 1.点击上部的li，当前li 添加current类，其余兄弟移除类
    $(".nav li").click(function () {
        // 链式编程操作
        $(this).addClass("current").siblings('li').removeClass("current");
    });
    
    // 翻页切换
    $(".pagination li").click(function () {
        // 链式编程操作
        $(this).addClass("yan").siblings('li').removeClass("yan");
    });

})

